<template>
 <div class="top-wrapper" >
   <div  class="tip-title">请填写您的预约信息</div>
  <mt-field label="被访部门" placeholder="请输入被访部门" v-model="department"></mt-field>
<mt-field label="被访者姓名" placeholder="请输入被访者姓名" type="email" v-model="username"></mt-field>
<mt-field label="被访者手机" placeholder="请输入被访者手机" type="email" v-model="phone"></mt-field>
  <div  @click="openPicker">
  <mt-cell  title="到访时间" is-link>
  <span style="color: black">{{pickerFlag?'请选择到访时间':pickerValue}}</span>
</mt-cell>
</div>

 <mt-field label="到访人数"     placeholder="请输入到访人数" type="people" v-model="phone"></mt-field>
 <div  @click="visitFor">
   <mt-cell title="到访事由" is-link>
  <span style="color: black">{{forReason==''?'请选择到访事由':forReason}}</span>
</mt-cell>
 </div>

  <mt-field label="车牌属地" placeholder="请输入车牌属地"  v-model="carPlace"></mt-field>
 <mt-field placeholder="车牌号码选填" v-model="carCode"></mt-field>
 <mt-button class="btn" @click="addVisit" type="primary">预约</mt-button>
  <mt-datetime-picker
    ref="picker"
    type="datetime"
    v-model="pickerValue"
     @confirm="handleConfirm"
    >
  </mt-datetime-picker>
<mt-popup
 style="width:100%"
  v-model="popupVisible"
  position="bottom">
 <div class="tip-wrapper">
   <span  @click="choiceCancel" class="left">取消</span>
   <span @click="choiceFor" class="right">完成</span>
 </div>
 <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
</mt-popup>
 </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      carPlace:"",
      forReason: "",
      slots: [{ values: ["参观公司", "商务洽谈", "参加面试", "收发快递"] }],
      pickerFlag: true,
      carCode: "",
      popupVisible: false,
      department: "",
      username: "",
      phone: "",
      pickerValue: "",
      actions: [
        {
          name: "参观公司"
        },
        {
          name: "商务洽谈"
        },
        {
          name: "参观面试"
        },
        {
          name: "收发快递"
        }
      ]
    };
  },
  created() {
    this.$nextTick(() => {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();

      this.pickerValue = `${year}-${month}-${day} 00:00:00`;
      this.$nextTick(() => {
        this.$emit("tabchange", "home");
      });
    });
  },
  methods: {
    showCarCode() {},
    onValuesChange(picker, values) {
      this.forReason = values[0];
      picker.setSlotValue(1, values);
    },
    choiceFor() {
      this.popupVisible = false;
    },
    choiceCancel() {
    
      this.popupVisible = false;
    },
    openPicker() {
      console.log("999");
      this.$refs.picker.open();
    },
    visitFor() {
      this.popupVisible = true;
    },
    handleConfirm(e) {
      var date = new Date(e);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var choiceTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      this.pickerValue = choiceTime;
      this.pickerFlag = false;
    },
    addVisit() {
      this.$router.push({
        path: "/success"
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  background: rgb(245, 245, 245);
  bottom: 0;
}

.btn {
  padding: relative;
  display: block;
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  color: white;
  border-radius: 30px;
}

.tip-wrapper {
  position: relative;
  height: 40px;
  line-height: 40px;
}

.tip-title {
  position: relative;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  padding-left: 12px;
  background: #eeeeee;
}
.mint-field-core,
.mint-cell-value {
  position: relative;
  text-align: right;
}
input {
  position: relative;
  text-align: right;
}
.left {
  padding: relative;
  float: left;
  font-size: 15px;
  color: gray;
  margin-left: 30px;
}

.right {
  padding: relative;
  float: right;
  font-size: 15px;
  color: rgb(61, 136, 248);
  margin-right: 30px;
}
</style>
